<template>
  <div>
    <div class="dialogPop">
     <el-dialog :visible.sync="addData.dialogAdd" :before-close="handleClose" size="tiny">
        <p class="dialog-title">{{addData.popTitle}}</p>
        <el-form :model="addData" :rules="rulesAdd" ref="addData" label-width="124px">
            <div v-if="showProvinceDialog">
                <el-row :gutter="20">
                    <el-col :span="20">
                    <el-form-item label="省名称：" prop="provinceName">
                        <el-input  v-model="addData.provinceName" placeholder="请输入省份"></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div v-if="showCityDialog">
                <el-row :gutter="20">
                    <el-col :span="20">
                        <!-- <el-form-item label="省名称：" prop="provinceId">
                            <el-select  v-model="addData.provinceId" placeholder="请选择" style="width:100%" @change="changeProvice">
                                <el-option v-for="(item,index) in formInline.province" :key="index" :label="item.provinceName" :value="item.provinceId">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
                         <el-form-item label="省名称：" prop="provinceId">
                            <province v-model="addData.provinceId"></province>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                    <el-form-item label="市名称：" prop="cityName">
                        <el-input v-model="addData.cityName"  placeholder="请输入市"></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div v-if="showAreaDialog"> 
                <el-row :gutter="20">
                    <el-col :span="20">
                    <!-- <el-form-item label="省名称：" prop="provinceId">
                        <el-select v-model="addData.provinceId" placeholder="请选择" style="width:100%" @change="changeProvice">
                            <el-option v-for="(item,index) in formInline.province" :key="index" :label="item.provinceName" :value="item.provinceId">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="省名称：" prop="provinceId">
                            <province v-model="addData.provinceId"></province>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                    <!-- <el-form-item label="市名称：" prop="cityId">
                        <el-select v-model="addData.cityId" placeholder="请选择" style="width:100%">
                            <el-option v-for="(item,index) in formInline.findCity" :key="index" :label="item.cityName" :value="item.cityId">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="市名称：">
                            <city v-model="addData.cityId" :province="addData.provinceId"></city>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                    <el-form-item label="区名称：" prop="areaName">
                         <el-input v-model="addData.areaName" placeholder="请输入区"></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <p class="btn">
            <el-button type="primary" @click="addInfor('addData')">确 认</el-button>
            <el-button @click="resetFormdelDialogAdd('addData')">取 消</el-button>
          </p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import {addProvince, addCity, addArea, updateProvince, updateCity, updateArea} from 'api/system';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';

export default {
    components: { province, city},
    props: {
        addData: {
            default() {
                return {
                    dialogAdd: false // 默认不显示
                }
            },
            required: true
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['uid'])
    },
    created() {
        this.findWho(this.$route.name);
    },
    data() {
        return {
            formInline: {
                fProvinceId: '', // 省份
                fCityId: '', // 市区
                fAreaId: '', // 区县
                province: [], // 省份列表
                findCity: []// 城市列表
            },
            showProvinceDialog: false,
            showCityDialog: false,
            showAreaDialog: false,
            listQuery: { // 分页
                page: 1,
                total: 0
            },
            rulesAdd: {
                provinceName: [{ required: true, message: '请输入省份名称', trigger: 'blur' }],
                provinceId: [{ required: true, message: '请输入省份名称', trigger: 'blur' }],
                cityName: [{ required: true, message: '请输入市名称', trigger: 'blur' }],
                cityId: [{ required: true, message: '请输入市名称', trigger: 'blur' }],
                areaName: [{ required: true, message: '请输入区名称', trigger: 'blur' }]
            }
        }
    },
    methods: {
        // 根据路由显示不同的弹框
        findWho(routerName) {
            if (routerName == '省管理') {
                this.showProvinceDialog=true;
            } else if (routerName == '市管理') {
                this.showCityDialog=true;
            } else if (routerName == '区管理') {
                this.showAreaDialog=true;
            }
        },
        // 弹窗的确定按钮 
        addInfor(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addOrUpdate() ;
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
        addOrUpdate() {
            // 添加操作
            if (this.addData.status==1) {
                //console.log('当前是添加的实现');
                if (this.$route.name=='省管理') {
                    this.addProvince()
                } else if (this.$route.name=='市管理') {
                    this.addCity();
                } else if (this.$route.name=='区管理') {
                    this.addArea();
                }
            }
            // 修改操作
            if (this.addData.status==2) {
                //console.log('当前是修改实现');
                if (this.$route.name=='省管理') {
                    this.updateProvince();
                } else if (this.$route.name=='市管理') {
                    this.updateCity();
                } else if (this.$route.name=='区管理') {
                    this.updateArea();
                }
            }
        },
        // 修改的功能
        updateProvince() {
            let provinceName= this.addData.provinceName;
            let provinceId=this.addData.provinceId;
            //console.log(provinceName, provinceId, '更改了省');
            updateProvince(provinceName, provinceId).then(res => {
                this.warnInforPop(res, this.addData.status);
            });
        },
        updateCity() {
            let cityName= this.addData.cityName;
            let cityId= this.addData.cityId;
            let provinceId=this.addData.provinceId;
            //console.log(cityName, provinceId, cityId, '更改了市');
            updateCity(cityName, provinceId, cityId).then(res => {
                this.warnInforPop(res, this.addData.status);
            });
        },
        updateArea() {
            let provinceId=this.addData.provinceId;
            let areaName= this.addData.areaName;
            let areaId=this.addData.areaId;
            let cityId= this.addData.cityId;
            //console.log(provinceId, areaName, areaId, cityId, '更改了区');
            updateArea(provinceId, areaName, areaId, cityId).then(res => {
                this.warnInforPop(res, this.addData.status);
            });
        },
        // 添加的功能
        addProvince() {
            let provinceName = this.addData.provinceName;
            addProvince(provinceName).then(res => {
                this.warnInforPop(res, this.addData.status);
            });
        },
        addCity() {
            let provinceId = this.addData.provinceId;
            let cityName = this.addData.cityName;
            addCity(cityName, provinceId).then(res => {
                this.warnInforPop(res, this.addData.status);
            });
        },
        addArea() {
            let cityId = this.addData.cityId;
            let areaName = this.addData.areaName;
            let provinceId=this.addData.provinceId;
            //console.log(provinceId, 'provinceId/provinceId/provinceId');
            addArea(areaName, cityId, provinceId).then(res => {
                this.warnInforPop(res, this.addData.status);
            });
        },
        // 请求成功后的弹窗提醒
        warnInforPop(res, stutus) {
            let warnText ='添加成功！';
            if (this.addData.status==2) {
                warnText ='修改成功！' 
            }
            if (res.data.status==200) {
                this.$message({
                    type: 'success',
                    message: warnText
                });
                this.$emit('searchList', true);
                this.handleClose();
               
            } else {
                let warnMessage=res.data.errorMsg;
                this.$message({
                    type: 'info',
                    message: warnMessage
                });
            }
        },
        // 弹出框的关闭按钮
        handleClose() {
            this.$refs.addData.resetFields();
            this.delDialogAdd();
        },
        resetFormdelDialogAdd(addData) {
            this.$refs[addData].resetFields();
            this.delDialogAdd();
        },
        // 还原弹窗信息
        delDialogAdd() {
            this.addData.dialogAdd = false;
            this.addData.provinceId='',
            this.addData.provinceName='',
            this.addData.cityId='',
            this.addData.cityName='',
            this.addData.areaName='',
            this.addData.status=''
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../style/dialog.scss';
</style>

